<template>
  <div id='shopcart'>
  		<div class="content">
              <div class="content-left">
                  <div class="logo-wrapper">
                        <div class="logo" :class="{'highlight':totalCount>0}">
                            <span class="icon-shopping_cart" :class="{'highlight':totalCount>0}"></span>
                        </div>
                        <div class="num" v-show="totalCount>0">{{totalCount}}</div>
                  </div>
                  <div class="price" :class="{'highlight':totalCount>0}">￥{{totalPrice}}元</div>
                  <div class="desc">另需配送费{{deliveryPrice}}元</div>
              </div>

              <div class="content-right">
                  <div class="pay" :class="payClass">{{payDesc}}</div>
              </div>
            
            <div class="shopcart-list"></div>
          </div>
  </div>
</template>

<script>
export default {
  name: 'shopcart',
  props:{
      deliveryPrice:{
          type:Number,
          default:0
      },
      minPrice:{
          type:Number,
          default:20
      },
      selectFoods:{
          type:Array,
          default(){
              return []
          }
      }
  },
  computed:{
      totalPrice(){
          let total = 0;
          this.selectFoods.forEach((food) =>{
            total += food.price * food.count
          })
          return total;
      },
      totalCount(){
          let count =0;
          this.selectFoods.forEach((food) =>{
                count+= food.count;
          });
          return count;
      },
      payDesc(){
          if(this.totalPrice ===0){
              return `￥${this.minPrice}元起送`;
          }else if(this.totalPrice<this.minPrice){
              let diff= this.minPrice -this.totalPrice;
              return `还差${diff}元起送`;
          }else{
              return `去结算`
          }
      },
      payClass(){
          if(this.totalPrice<this.minPrice){
              return 'not-enough';
          }else{
             return 'enough'
          }
      }
  }
 

}
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "./shopcart.styl"
    111
</style>